<template>
  <div class="mann'mge">
    <el-dialog
      :title="operateType ==='add' ? '新增用户' : '更新用户'"
      v-model="isShow"
      width="50%"
    >
      <common-form
        :formLabel="opertateFormLabel"
        :form="operateForm"
        :inline="true"
        ref="form"
      ></common-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </template>

    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="adduse">+新增</el-button>
      <common-form
        :formLabel="formLabel"
        :form="searchForm"
        :inline="true"
        ref="form"
      >
        <!-- 人员查询 -->
        <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
      </common-form>
    </div>

  <div class="root">
    <el-table
      :data="tableData"
      class="table"
      style="width: 100%"
      :fit='true'
      :default-sort="{prop: 'id', order: 'descending'}"
    >
      <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                       :key="index" align="center">
      </el-table-column>
      <el-table-column label="登录秘钥" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" icon="Download" round @click="download(scope.$index, scope.row)" >下载</el-button>
<!--          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
<!--          <el-button size="small" type="primary" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
import CommonForm from '@/components/CommonForm'
export default {
  name: "test",
  components: {
    "common-form": CommonForm
  },
  data() {
    return {
      operateType:'add',
      isShow:false,
      tableHeader: {
        id: "ID",
        vpnusername: "VPN用户名",
        username: "真实姓名",
        job: "部门",
        datetime:"申请时间"
      },
      tableData: [],
      opertateFormLabel:[
        {
          model: 'vpnusername',
          label: 'VPN用户名',
          type: 'input'
        },
        {
          model: 'username',
          label: '真实姓名',
          type: 'input'
        },
        {
          model: 'job',
          label: '岗位',
          type: 'select',
          opts: [
            {
              label: '后端开发',
              value: 0
            },
            {
              label: '前端开发',
              value: 1
            },
            {
              label: '运维',
              value: 2
            },
            {
              label: 'QA测试',
              value: 3
            },
            {
              label: '运营',
              value: 4
            },
            {
              label: '设计UI',
              value: 5
            },
          ]
        },
        {
          model: 'datetime',
          label: '默认申请时间',
          type: 'datetime'
        },
      ],
      operateForm:{
        vpnusername: '',
        username: '',
        job: "",
        datetime: ""
      },
      formLabel:[
        {
          model:"keyword",
          label:'',
          type:'input'
        }
      ],
      searchForm:{
        keyword:''
      },
      tableLabel:[
        {
          prop: "vpnusername",
          label: "VPN用户名"
        },
        {
          prop: "username",
          label: "真实姓名"
        },
        {
          prop: "job",
          label: "岗位"
        },
        {
          prop: "datetime",
          label: "申请时间",
          width: 200
        },
      ],
      config:{
        page:1,
        total:30
      }
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    confirm(){
      if(this.operateType === 'edit'){
        this.$api.post('/user/edit',this.operateForm).then(res=>{
          console.log(res)
          this.isShow=false
          this.getList()
        })
      }else{
        this.$api.post('/user/add',this.operateForm).then(res=>{
          console.log(res)
          this.isShow=false
          this.getList()
        })
      }
    },
    adduse(){
      this.isShow = true
      this.operateType='add'
      this.operateForm={
        vpnusername: '',
        username: '',
        job: "",
        datetime: ""
      }
    },
    getList(vpnusername = ''){
      this.config.loading = true
      name ? (this.config.page=1) : ''
      getUser({
        page:this.config.page,
        vpnusername
      }).then(( { data:res } )   => {
        console.log(res,'res')
        this.tableDate= res.list.map(item => {
          item.sexLabel = item.sex === 0 ? "女" : "男"
          return item
        })
        this.config.total=res.count
        this.config.loading=false
      })
    },
    download (index, row) {
      console.log(index, row.username)
    },
    // handleDelete (index, row) {
    //   console.log(index, row.username)
    // }

    async getData() {
      const vpnuserData = await this.$api.vpnuserlist()
      this.tableData = vpnuserData.data
    }
  },
  mounted() {
    this.getData()
  }

}
</script>

<style scoped>
.root {
  margin: 10px 10px 0px 10px;
}

/deep/.el-table .cell{
  display: flex;
  justify-content: center;
}

.manage-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
